import { memo, useMemo, useState } from "react";

//memo函数，用于缓存组件

//memo函数中比较父组件的prop参数是否改变，原理用的是Object.is()原生方法
//1.如果prop参数中是基本数据类型，则如果父组件的prop参数不改变，不会导致子组件重新渲染
//2.如果prop参数中是引用类型（如对象，数组），由于React比较的是引用地址，非本身改变，所以如果父组件的prop参数不改变，也会导致子组件重新渲染
const MemoSun = memo(function Son(props) {
  console.log('son组件渲染了')
  return <div>我是Son组件</div>
})

//正常机制下，如果父组件状态发生改变重新渲染，子组件会跟着重新渲染
// function Son(){
//   console.log('son组件渲染了')
//   return <div>我是Son组件</div>
// }
function App() {
  const [count, setCount] = useState(0)
  //针对第2种引用类型的情况，可以用useMemo缓存数据解决
  const user = useMemo(() => {
    return [1, 2, 3]
  }, [])
  return (
    <div className="App">
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* <Son/> */}
      <MemoSun count={1} user={user} />
    </div>
  );
}

export default App;
